<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米注册页面</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			ul {
				list-style-type: none;
			}
			
			a {
				text-decoration: none;
			}
			
			#container {
				width: 100%;
				height: 100%;
				background-color: #F9F9F9;
				padding-top: 20px;
			}
			
			#container #main {
				width: 855px;
				height: 533px;
				background-color: white;
				margin-left: auto;
				margin-right: auto;
			}
			
			#container #main table {
				margin: 0px auto;
				text-align: center;
				position: relative;
			   
			}
			
			#container #main .zi {
				font-size: 28px;
			}
			#container #main input{
				width: 334px;
				height: 40px;
				border: 1px solid #E8E8E8;
				outline: 0px;
				font-size: 12px;
				text-indent: 10px;
			}
			#main #btn {
	            background-color: #F87300;
	            font-size: 18px;
	            color: white;
	            border: 0px;

            }
            #container #main #phone{
            	width: 292px;
            	position: relative;
            	left: -20px;
            }
            #container #main #addressbtn{
            	width: 40px;
            	height: 42px;
            	background: white url(img/login/adressbtn.png) center center no-repeat;
            	position: absolute;
            	top: 163px;
            	left: 300px;
            }
			#tanhao {
				display: inline-block;
				width: 15px;
				height: 15px;
				border-radius: 8px;
				background-color: #FF6700;
				text-align: center;
				color: white;
				font-size: 12px;
				margin-left: 10px;
				margin-top: 10px;
			}
			#container #main #yanzhengma{
				width: 194px;
				margin-right: 10px;
			}
			#yzmsg {
				display: inline-block;
				width: 320px;
				line-height: 30px;
				font-size: 14px;
				color: #F87300;
				border: 1px slid;
			}
			#container #main p{
				font-size: 11px;
				color: #757575;
			    margin: 12px 255px;
			}
			#container #main #adress{
				width: 334px;
				height: 268px;
				border: 1px solid #E0E0E0;
				overflow: auto;
			}
			#container #main #tr1{
				position: absolute;
				top: 205px;
				left: 7px;
				background-color: white;
				display: none;
			}
			#container #main #tr2{
				display: none;
			}
			#tr3,#tr4{
				display: none;
			}
			#container #main  #adress #title{
				width: 330px;
				line-height: 30px;
				background-color: #FCDECC;
			}
			#container #main #adress li{
				width: 330px;
				line-height: 37px;
				border-bottom: 1px solid #E0E0E0;
				text-align: left;
				text-indent: 10px;
				font-size: 12px;
				
			}
			#container #main #adress li .span1{
				float: right;
				margin-right: 25px;
				color: #9D9DAE;
			}
			#footer {
				width: 100%;
				height: 90px;
				font-size: 12px;
				overflow: hidden;
				text-align: center;
				color: #757575;
			}
			
			#footer ul {
				margin-left: 560px;
			}
			
			#footer ul li {
				float: left;
				line-height: 35px;
			}
			
			#footer ul li a {
				color: #757575;
			}
			
			#footer ul li a:hover {
				color: #000000;
			}
			
			#footer ul li span {
				margin: 0px 10px;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="main">
				<form onsubmit="return yanzheng()" >
					<table border="0" cellspacing="0" cellpadding="0" width="350px">
					<tr height="70px" valign="top">
						<td><img src="img/SY/logo.png" /></td>
					</tr>
					<tr height="80px" valign="center">
						<td class="zi">注册小米账号</td>
					</tr>
					<tr height="65px" valign="center">
						<td class="zi"><input type="text" name="" id="phone" value="中国（+86）"onclick="show()" /><input type="button" name="addressbtn" id="addressbtn" value=""onclick="show()" />
						</td>
					</tr>
					<tr align="center"id="tr1"><td>
						<div id="adress">
						<ul>
							<li id="title">常用</li>
							<li onclick="tianXie(this)"><span>中国</span> <span class="span1">+86</span></li>
							<li onclick="tianXie(this)"><span>中国台湾</span> <span class="span1">+886</span></li>
							<li onclick="tianXie(this)"><span>中国香港</span><span class="span1">+852</span></li>
							<li onclick="tianXie(this)"><span>Brazil</span><span class="span1">+55</span></li>
							<li onclick="tianXie(this)"><span>India</span><span class="span1">+91</span></li>
							<li onclick="tianXie(this)"><span>Indonesia</span><span class="span1">+82</span></li>
							<li onclick="tianXie(this)"><span>Malaysia</span> <span class="span1">+60</span></li>
							<li id="title">A</li>
							<li onclick="tianXie(this)"><span>Andorra</span> <span class="span1">+376</span></li>
							<li onclick="tianXie(this)"><span>Afghanistan</span><span class="span1">+93</span></li>
							<li onclick="tianXie(this)"><span>Antigua and Barbuda</span><span class="span1">+1</span></li>
							<li onclick="tianXie(this)"><span>Anguilla</span><span class="span1">+1</span></li>
							<li onclick="tianXie(this)"><span>Albania</span><span class="span1">+355</span></li>
							<li onclick="tianXie(this)"><span>Armenia</span><span class="span1">+374</span></li>
							<li onclick="tianXie(this)"><span>Azerbaijan</span><span class="span1">+994</span></li>
							<li onclick="tianXie(this)"><span>Algeria</span><span class="span1">+213</span></li>
							<li id="title">B</li>
							<li onclick="tianXie(this)"><span>Bosnia and Herzegovina</span> <span class="span1">+387</span></li>
							<li onclick="tianXie(this)"><span>Barbados</span><span class="span1">+1</span></li>
							<li onclick="tianXie(this)"><span>Bangladesh</span><span class="span1">+880</span></li>
							<li onclick="tianXie(this)"><span>Belgium</span><span class="span1">+32</span></li>
							<li onclick="tianXie(this)"><span>Burkina Faso</span><span class="span1">+226</span></li>
							<li onclick="tianXie(this)"><span>Bulgana</span> <span class="span1">+359</span></li>
							<li onclick="tianXie(this)"><span>Bahrain</span><span class="span1">+973</span></li>
							<li onclick="tianXie(this)"><span>Burundi</span><span class="span1">+257</span></li>
							<li onclick="tianXie(this)"><span>Benin</span><span class="span1">+229</span></li>
							<li onclick="tianXie(this)"><span>Bermuda</span><span class="span1">+1</span></li>
						</ul>
					</div>
					</td></tr>
					<tr height="50px" valign="center">
						<td class="zi"><input type="text" name="" id="number1" value="" placeholder="请输入手机号码"/></td>
					</tr>
					<tr height="30px" valign="center" id="tr3" align="left">
						<td><span id="tanhao">!</span><span id="yzmsg">请输入手机号码</span></td>
					</tr>
					<tr height="30px" valign="center" id="tr4" align="left">
						<td><span id="tanhao">!</span><span id="yzmsg">手机号码格式错误</span></td>
					</tr>
					<tr><td></td></tr>
					<tr height="50px" valign="center">
						<td class="zi"><input type="text" name="" id="yanzhengma" value="" placeholder="图片验证码"/><img src="img/login/getCode.jpg"align="center"/></td>
					</tr>
					<tr height="30px" valign="center" id="tr2" align="left">
						<td><span id="tanhao">!</span><span id="yzmsg">请输入验证码</span></td>
					</tr>
                    <tr height="50px" valign="center">
						<td align="center"><input type="submit" name="" id="btn" value="立即注册" /></td>
					</tr>
				</table>
				<p>点击“立即注册”，即表示您同意并愿意遵守小米 <span style="color: #000000;font-weight: bold;">用户协议</span> 和<span style="color: #000000;font-weight: bold;">隐<br />私政策</span> </p>
				</form>
				
			</div>
			<div id="footer">
				<div>
					<ul>
						<li>
							<a href="shouye.html">简体</a> <span>|</span></li>
						<li>
							<a href="#">繁体</a> <span>|</span></li>
						<li>
							<a href="#">English</a> <span>|</span></li>
						<li>
							<a href="#">常见问题</a>
						</li>
					</ul>
				</div>
				<div style="clear: both;"> </div>
				<p>小米公司版权所有-京ICP备10046444-<img src="img/login/ghs.png " />京公网安备11010802020134号-京ICP证110507号</p>
			</div>
		</div>
       <script type="text/javascript">
       	var number1=document.getElementById("number1");
       	var yanzhengma=document.getElementById("yanzhengma");
       	var tr3=document.getElementById("tr3");
       	var tr2=document.getElementById("tr2");
       	var isgo=true;
       	function yanzheng(){
       		if(number1.value==""){
       			tr3.style.display="block";
       			number1.style.borderColor="#F87300";
       			isgo=false;
       		}
       		else {
       			tr3.style.display="none";
       			number1.style.borderColor="#E8E8E8";
       		}
       		if(number1.value!=""&&number1.value.length!=11){
       			tr4.style.display="block";
       			number1.style.borderColor="#F87300";
       			isgo=false;
       		}
       		else {
       			tr4.style.display="none";
       			number1.style.borderColor="#E8E8E8";
       		}
       		if(number1.value!=""&&yanzhengma.value==""&&number1.value.length==11){
       			tr2.style.display="block";
       			yanzhengma.style.borderColor="#F87300";
       			isgo=false;
       		}
       		else{
       			tr2.style.display="none";
       			yanzhengma.style.borderColor="#E8E8E8";
       		}
       		return isgo;
       	}
       	function show(){
       		var address=document.getElementById("tr1");
       		if(address.style.display=="block"){
       			address.style.display="none";
       		}
       		else address.style.display="block";
       	}
       	function tianXie(t){
       		var phone=document.getElementById("phone");
       		phone.value=t.children[0].innerHTML+"("+t.children[1].innerHTML+")";
       	}
     </script>
	</body>

</html>